<template>
  <Dialog :appDialog="appDialog">
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" class="formData">
      <!-- <el-form-item label="上传表格" required> -->
      <div class="upload">
        <div class="left"> 1.请根据导入门店模板，进行填写， <span class="download" @click="downloadDome">下载Excel模版</span> </div>
      </div>
      <!-- </el-form-item> -->
      <el-form-item label="2.上传导入门店模板," required label-width="160px">
        <div class="upload-content">
          <ZWUpload v-if="!formData.fileData.name" class="upload" :upInfo="picInfo" @submit="getFileListFun" />
          <div v-if="!formData.fileData.name" class="upload-box">
            <el-icon style="font-size: 20px"><plus /></el-icon>
            <span>点击上传</span>
          </div>
          <div class="upload-file-box" v-if="formData.fileData.name">
            <div class="left">
              <img src="@/assets/image/customer/xls_icon.png" alt="" />
              <span>{{ formData.fileData.name }}</span>
            </div>
            <img @click="delFile" class="right" src="@/assets/image/customer/close_icon.png" alt="" />
          </div>
        </div>
      </el-form-item>
    </el-form>
  </Dialog>
  <!-- 导入记录 -->
  <ImportTable ref="ImportTableRef" :selectid="selectid" @cancel="closeImportCustomer" @save="getListFun" />
</template>


<script lang="ts" setup>
import Dialog from '@/components/Dialog.vue'
import ZWUpload from '@/components/ZWUpload.vue'
import ImportTable from './ImportTable.vue'
import { inputCustomer } from '@/api/customerCenter'
import { getdownloadtemp, getdownimport } from '@/api/employe/storemanagement/sensitiveWord'

import { ElMessage } from 'element-plus'
import { ref, reactive, watch, computed } from 'vue'
import type { ElForm } from 'element-plus'
import { getSetionId } from '@/utils/utils'
import { useStore } from '@/store'

const emit = defineEmits(['save', 'cancel'])
const pro = defineProps(['selectid'])
const selectid = ref(pro.selectid)
type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()
const store = useStore()
const ImportTableRef = ref(null)
const tabs = ref([])
const picInfo = ref({
  type: 5,
  label: '文件',
  prop: 'files',
  multiple: false,
  limitSize: 20,
  limitNum: 1,
  acceptFile: '.xls,.xlsx',
  files: []
})
const rules = [{ cust_tag_ids: { required: true, trigger: 'blur', message: '请选择标签' } }, { work_user_ids: { required: true, trigger: 'blur', message: '请选择分配员工' } }]
let formData = ref({})
let yuangongList = ref([])

// 初始化formData
const initFormData = () => {
  ruleFormRef.value?.resetFields()
  formData.value = {
    fileData: {},
    cust_tag_ids: [], //标签id
    work_user_ids: [] //当前选择的员工id
  }
}

// 获取选择的标签
const getLabelFun = (val: object) => {
  console.log(val.idList, 5555)
  formData.value.cust_tag_ids = val.idList
  tabs.value = val.data
}
// 删除选中的标签
const delTab = (index: number) => {
  tabs.value.splice(index, 1)
}

// 关闭弹框
const cancelHandel = () => {
  appDialog.value.visible = false
  emit('cancel')
}

// 保存
const submitHandel = () => {
  let { fileData, cust_tag_ids, work_user_ids } = formData.value
  if (!fileData.name) {
    ElMessage.error('请上传门店模板')
    return
  }
  setTimeout(() => {
    ImportTableRef.value.appDialog.visible = true
    appDialog.value.visible = false
  }, 0)
  let param = new FormData()
  param.append('file', fileData.raw)
  // param.append('cust_tag_ids', cust_tag_ids)
  // param.append('work_user_ids', work_user_ids)
  getdownimport(param)
    .then((r: any) => {
      // emit('save', r.msg)
      ImportTableRef.value.initpage()
      cancelHandel()
    })
    .catch((e: object) => {})
}

// 获取上传的文件
const getFileListFun = (val: any) => {
  console.log(val, 5555)
  formData.value.fileData = val
}

let appDialog = ref({
  visible: false,
  title: '导入门店',
  width: '620px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '导入'
})

watch(
  () => appDialog.value.visible,
  (val) => {
    if (val) {
      initFormData()
      yuangongList.value = []
      tabs.value = []
    }
  }
)

// 下载dome
const downloadDome = () => {
  getdownloadtemp({})
    .then((r: any) => {
      var a = document.createElement('a')
      // 获取文件名fileName
      a.href = r.url
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    })
    .catch((e: any) => {
      console.log(e)
    })
}

// 删除当前上传的文件
const delFile = () => {
  formData.value.fileData = {}
  picInfo.value.files = []
}

defineExpose({
  appDialog
})
</script>

<style lang="scss" scoped>
.formData {
  max-height: 50vh;
  overflow-y: scroll;
  padding: 12px 30px 50px 0;

  .upload {
    .left {
      display: flex;
      margin-left: 10px;

      margin-bottom: 20px;
    }
  }
  .upload-content {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    height: 36px;
    border: 1px solid #eaeaea;
    margin-bottom: 6px;
    .upload {
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9;
      opacity: 0;
    }
    .upload-box {
      position: relative;
      width: 180px;
      height: 36px;
      border-radius: 4px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #969696;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-left: 9px;
      }
    }
    .upload-file-box {
      display: flex;
      justify-content: space-between;
      border-radius: 4px;
      border: 1px solid #eaeaea;
      width: 180px;
      height: 36px;
      line-height: 36px;
      .left {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #33302d;
        padding-left: 10px;
        span {
          vertical-align: middle;
        }
        img {
          margin-top: 8px;
          width: 20px;
          height: 20px;
          margin-right: 4px;
          vertical-align: middle;
        }
      }
      .right {
        cursor: pointer;
        width: 12px;
        height: 12px;
        margin-right: 10px;
        margin-top: 12px;
      }
    }
  }

  .download {
    font-family: STHeitiSC-Light, STHeitiSC;
    color: #ff6b00;
    margin-left: 10px;
    cursor: pointer;
  }
  .upload-desc {
    margin-top: 6px;
    background: #f9f9f9;
    border-radius: 1px;
    font-size: 12px;
    font-family: STHeitiSC-Light, STHeitiSC;
    color: #696969;
    padding: 4px 8px;
    line-height: 16px;
  }
  .tabs-box {
    margin-bottom: 7px;
    div {
      display: inline-block;
      background: #fffaf9;
      border-radius: 2px;
      border: 1px solid #ffc69e;
      justify-content: center;
      align-items: center;
      padding: 0 4px;
      line-height: 22px;
      height: 22px;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #ff6b00;
      margin-right: 10px;
      margin-bottom: 7px;
      .del-icon {
        margin-left: 8px;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
  .yuangong-list {
    div {
      display: inline-block;
      vertical-align: middle;
      background: #fffaf9;
      border-radius: 1px;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 4px 8px;
      line-height: 22px;
      box-sizing: border-box;
      img {
        width: 10px;
        height: 12px;
      }
      .del_icon {
        width: 12px;
        height: 12px;
        cursor: pointer;
      }
      span {
        margin: 0 10px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #35383a;
      }
    }
  }
}
.formData::-webkit-scrollbar {
  display: none;
}
</style>

<style>
.upload-content .el-upload {
  display: block !important;
}

.upload-content .el-form-item__content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>
